import React, { useEffect, useState } from 'react';
import {
  Card,
  Grid,
  Message,
  Space,
  Image,
  Button,
} from '@arco-design/web-react';
import { useLocation } from 'react-router-dom';
import styles from '../style/modelDetails..module.less';
import {
  getCampusAiModelDetail,
  setCampusAiModelPublish,
  cancelCampusAiModelPublish,
} from '@/api/model';
import {
  bottomMoldTypeOpt,
  modelStatusOptions,
} from '@/pages/resources/common';

const Row = Grid.Row;
const Col = Grid.Col;
function ModelDetails() {
  function useQuery() {
    return new URLSearchParams(useLocation().search);
  }
  const query = useQuery();
  const ID = query.get('ID');

  const [detail, setDetail] = useState(null);
  const [bottomMoldType, setBottomMoldType] = useState('');
  const [modelStatusType, setModelStatusType] = useState('');

  const getDetail = async () => {
    const res: any = await getCampusAiModelDetail({ ID });

    if (res.StatusCode === 200) {
      setDetail(res.Result);
      const bottomMoldType = bottomMoldTypeOpt.find(
        (opt) => opt.value === res.Result.BottomMoldType
      )?.label;
      setBottomMoldType(bottomMoldType);

      const modelStatusType = modelStatusOptions.find(
        (opt) => opt.value === res.Result.Status
      )?.label;
      setModelStatusType(modelStatusType);
    } else {
      Message.error('详情获取失败，请刷新重试');
      window.location.hash = '/resources/model';
    }
  };

  useEffect(() => {
    getDetail();
  }, []);

  const publishModel = async (row) => {
    const res: any = await setCampusAiModelPublish({ ID: row.ID });
    if (res.StatusCode === 200) {
      getDetail();
      Message.success(res.Message);
    } else {
      Message.error(res.Message);
    }
  };
  const cancelPublishModel = async (row) => {
    const res: any = await cancelCampusAiModelPublish({ ID: row.ID });
    if (res.StatusCode === 200) {
      getDetail();
      Message.success(res.Message);
    } else {
      Message.error(res.Message);
    }
  };
  return (
    <Card>
      {detail && (
        <div>
          <div style={{ display: 'flex', justifyContent: 'end' }}>
            {detail.Status === 3 && (
              <Button onClick={() => publishModel(detail)}>上架</Button>
            )}

            {detail.Status === 2 && (
              <Button onClick={() => cancelPublishModel(detail)}>下架</Button>
            )}
          </div>
          <div className="arco-descriptions-title">基础信息</div>
          <Row className="grid-demo" style={{ marginBottom: 16 }}>
            {detail.ModelNum && (
              <Col span={12} className={styles.gridItem}>
                <div className={styles.label}>模型编号</div>
                <div className={styles.value}>{detail.ModelNum}</div>
              </Col>
            )}
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>模型名称</div>
              <div className={styles.value}>{detail.ModelName}</div>
            </Col>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>底模类型</div>
              <div className={styles.value}>{bottomMoldType}</div>
            </Col>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>模型状态</div>
              <div className={styles.value}>{modelStatusType}</div>
            </Col>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>校园账号</div>
              <div className={styles.value}>{detail.UserName}</div>
            </Col>
            {detail.CreationTime && (
              <Col span={12} className={styles.gridItem}>
                <div className={styles.label}>训练时间</div>
                <div className={styles.value}>{detail.CreationTime}</div>
              </Col>
            )}

            {detail.CoverImage.length > 0 && (
              <Col span={24} className={styles.gridItem}>
                <div className={styles.label}>模型封面图</div>
                <div className={styles.value}>
                  <Space>
                    {detail.CoverImage.map((item) => (
                      <Image width={100} height={100} src={item} alt="" />
                    ))}
                  </Space>
                </div>
              </Col>
            )}
          </Row>
        </div>
      )}
    </Card>
  );
}

export default ModelDetails;
